<template>
  <h1>简单图表数据</h1>
  <hr />
  <div id="echarts"></div>
</template>

<script lang="ts" setup>
import { data_simpleData } from '../../../utils/api';
import { onMounted, reactive,inject } from 'vue';
import * as echarts from 'echarts';
var $echarts:any = inject("echarts");

onMounted(()=>{
  // 初始化echarts
  // var echarts=ref()
let container=$echarts.init(document.getElementById('echarts'))
  let chartData=reactive([])
  data_simpleData().then(res=>{
    chartData=res.data.data
    console.log(chartData)
    let x1Data=chartData.map((item:any)=>{
      return item.x
    })
    console.log(x1Data)
  // 设置 y轴数据
  let y1Data=chartData.map((item:any)=>{
      return item.val
    })
  let option = {
    title:{
      // text:'简单图表数据'
    },
    tooltip: {
    trigger:'axis',
    axisPointer: {
      // type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: x1Data,
      axisTick: {
        alignWithLabel: false
      }
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '数值',
      type: 'bar',
      barWidth: '30%',
      color:'green',
      data: y1Data
    }
  ]
};
container.setOption(option)
  })
})
</script>

<style scoped>
#echarts{
  height: 400px;
}
</style>